<template>
  <div class="template-center">
    <div class="section-header">
      <h2>模板中心</h2>
      <el-input
        v-model="searchQuery"
        placeholder="搜索模板..."
        prefix-icon="Search"
        clearable
        class="search-input"
      />
    </div>

    <div class="category-filter">
      <el-radio-group v-model="activeCategory" size="large">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="mobile">移动端</el-radio-button>
        <el-radio-button label="web">Web端</el-radio-button>
        <el-radio-button label="dashboard">管理后台</el-radio-button>
        <el-radio-button label="landing">落地页</el-radio-button>
      </el-radio-group>
    </div>

    <div class="template-grid">
      <template v-if="filteredTemplates.length > 0">
        <el-card
          v-for="template in filteredTemplates"
          :key="template.id"
          class="template-card"
          shadow="hover"
          :body-style="{ padding: '0px' }"
        >
          <div class="template-thumbnail">
            <el-image 
              :src="template.thumbnail || 'https://placeholder.pics/svg/400x300/DEDEDE/555555/模板缩略图'" 
              fit="cover" 
            />
            <div class="template-actions">
              <el-button type="primary" @click="useTemplate(template)">使用模板</el-button>
              <el-button @click="previewTemplate(template)">预览</el-button>
            </div>
          </div>
          <div class="template-info">
            <h3>{{ template.name }}</h3>
            <p class="template-desc">{{ template.description }}</p>
            <div class="template-meta">
              <el-tag size="small" :type="getTagType(template.category)">{{ getCategoryName(template.category) }}</el-tag>
              <span class="template-author">作者: {{ template.author }}</span>
            </div>
          </div>
        </el-card>
      </template>
      <el-empty v-else description="没有找到匹配的模板">
        <template #image>
          <el-icon :size="40"><Search /></el-icon>
        </template>
      </el-empty>
    </div>

    <el-dialog
      v-model="previewDialogVisible"
      fullscreen
      :title="selectedTemplate?.name || '模板预览'"
      :show-close="true"
    >
      <div class="template-preview-container">
        <div class="preview-info">
          <h2>{{ selectedTemplate?.name }}</h2>
          <p>{{ selectedTemplate?.description }}</p>
          <div class="preview-meta">
            <el-tag size="small" :type="getTagType(selectedTemplate?.category)">{{ getCategoryName(selectedTemplate?.category) }}</el-tag>
            <span>作者: {{ selectedTemplate?.author }}</span>
          </div>
          <div class="preview-actions">
            <el-button type="primary" @click="useSelectedTemplate">使用此模板</el-button>
            <el-button @click="previewDialogVisible = false">关闭</el-button>
          </div>
        </div>
        <div class="preview-image">
          <el-image 
            :src="selectedTemplate?.thumbnail || 'https://placeholder.pics/svg/800x600/DEDEDE/555555/模板预览'" 
            fit="contain" 
          />
        </div>
        <div class="preview-features">
          <h3>功能特点</h3>
          <ul>
            <li v-for="(feature, index) in selectedTemplate?.features" :key="index">{{ feature }}</li>
          </ul>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      v-model="useTemplateDialogVisible"
      title="使用模板"
      width="500px"
    >
      <el-form :model="newProject" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="newProject.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input 
            v-model="newProject.description" 
            type="textarea" 
            placeholder="请输入项目描述" 
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="useTemplateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="createProjectFromTemplate">创建</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

// 模板数据
const templates = ref([
  {
    id: 1,
    name: '移动端电商应用',
    description: '完整的移动端电商应用模板，包含首页、商品列表、详情、购物车、订单和个人中心等页面',
    thumbnail: '',
    category: 'mobile',
    author: 'UI设计团队',
    features: [
      '响应式布局，适配各种移动设备',
      '商品展示、筛选和搜索功能',
      '购物车和订单管理',
      '用户注册登录和个人中心',
      '支付流程和优惠券系统'
    ]
  },
  {
    id: 2,
    name: '数据管理后台',
    description: '功能完善的管理后台，包含数据统计、用户管理、内容管理等功能，适用于中小型企业',
    thumbnail: '',
    category: 'dashboard',
    author: '企业应用组',
    features: [
      '丰富的数据图表和统计功能',
      '用户权限管理和操作日志',
      '多级菜单和布局切换',
      '表格数据的增删改查',
      '批量导入导出功能'
    ]
  },
  {
    id: 3,
    name: '企业官网',
    description: '现代化企业官网模板，包含首页、关于我们、产品服务、新闻资讯、联系我们等页面',
    thumbnail: '',
    category: 'web',
    author: '网站设计团队',
    features: [
      '现代简洁的设计风格',
      '响应式布局，适配桌面和移动端',
      '多样化的内容展示组件',
      '联系表单和地图集成',
      '优化的SEO结构'
    ]
  },
  {
    id: 4,
    name: '产品落地页',
    description: '高转化率的产品落地页模板，强调产品特点和行动召唤，适合新产品发布或营销活动',
    thumbnail: '',
    category: 'landing',
    author: '营销团队',
    features: [
      '突出产品特点和价值主张',
      '明确的行动召唤按钮',
      '用户评价和社会证明展示',
      '吸引人的动画和过渡效果',
      '表单收集用户信息'
    ]
  },
  {
    id: 5,
    name: '社交媒体应用',
    description: '类似主流社交媒体的应用界面，包含信息流、个人主页、消息和通知等功能',
    thumbnail: '',
    category: 'mobile',
    author: '应用设计组',
    features: [
      '信息流和动态更新',
      '用户关注和互动功能',
      '私信和群聊系统',
      '通知和提醒中心',
      '个性化推荐算法'
    ]
  },
  {
    id: 6,
    name: '金融数据看板',
    description: '适用于金融行业的数据看板，包含市场概览、投资组合、交易历史等功能',
    thumbnail: '',
    category: 'dashboard',
    author: '金融解决方案组',
    features: [
      '实时市场数据展示',
      '多维度数据分析图表',
      '投资组合管理视图',
      '风险评估和预警系统',
      '交易记录和报表导出'
    ]
  }
])

const searchQuery = ref('')
const activeCategory = ref('all')
const previewDialogVisible = ref(false)
const useTemplateDialogVisible = ref(false)
const selectedTemplate = ref(null)
const newProject = ref({
  name: '',
  description: ''
})

// 过滤模板
const filteredTemplates = computed(() => {
  const query = searchQuery.value.toLowerCase()
  const categoryFilter = activeCategory.value === 'all' ? 
    templates.value : 
    templates.value.filter(t => t.category === activeCategory.value)
  
  if (!query) return categoryFilter
  
  return categoryFilter.filter(template => 
    template.name.toLowerCase().includes(query) ||
    template.description.toLowerCase().includes(query) ||
    template.author.toLowerCase().includes(query)
  )
})

// 获取分类名称
const getCategoryName = (category) => {
  const categories = {
    mobile: '移动端',
    web: 'Web端',
    dashboard: '管理后台',
    landing: '落地页'
  }
  return categories[category] || category
}

// 获取标签类型
const getTagType = (category) => {
  const tagTypes = {
    mobile: 'success',
    web: 'info',
    dashboard: 'warning',
    landing: 'danger'
  }
  return tagTypes[category] || ''
}

// 预览模板
const previewTemplate = (template) => {
  selectedTemplate.value = template
  previewDialogVisible.value = true
}

// 使用模板
const useTemplate = (template) => {
  selectedTemplate.value = template
  newProject.value = {
    name: `${template.name}项目`,
    description: template.description
  }
  useTemplateDialogVisible.value = true
}

// 使用已选择的模板
const useSelectedTemplate = () => {
  if (!selectedTemplate.value) return
  
  newProject.value = {
    name: `${selectedTemplate.value.name}项目`,
    description: selectedTemplate.value.description
  }
  previewDialogVisible.value = false
  useTemplateDialogVisible.value = true
}

// 基于模板创建项目
const createProjectFromTemplate = () => {
  if (!newProject.value.name) {
    ElMessage.warning('请输入项目名称')
    return
  }
  
  ElMessage.success(`已成功创建项目: ${newProject.value.name}`)
  useTemplateDialogVisible.value = false
  
  // 实际应用中这里应该调用父组件的方法创建项目
}
</script>

<style scoped>
.template-center {
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.search-input {
  width: 220px;
}

.category-filter {
  margin-bottom: 24px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.template-card {
  transition: transform 0.3s;
  overflow: hidden;
}

.template-card:hover {
  transform: translateY(-5px);
}

.template-thumbnail {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.template-thumbnail:hover .template-actions {
  opacity: 1;
}

.template-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.template-info {
  padding: 16px;
}

.template-info h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.template-desc {
  color: #606266;
  font-size: 14px;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 42px;
}

.template-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-author {
  font-size: 12px;
  color: #909399;
}

.template-preview-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr;
  gap: 24px;
  height: 100%;
}

.preview-info {
  grid-column: 1;
  grid-row: 1;
  padding: 16px;
}

.preview-info h2 {
  margin: 0 0 16px 0;
  color: #303133;
}

.preview-info p {
  color: #606266;
  margin: 0 0 16px 0;
}

.preview-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #909399;
}

.preview-actions {
  display: flex;
  gap: 12px;
}

.preview-image {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  overflow: auto;
}

.preview-features {
  grid-column: 1;
  grid-row: 2;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.preview-features h3 {
  margin: 0 0 16px 0;
  color: #303133;
}

.preview-features ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
}

.preview-features li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .template-preview-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .preview-info {
    grid-column: 1;
    grid-row: 1;
  }
  
  .preview-image {
    grid-column: 1;
    grid-row: 2;
    min-height: 300px;
  }
  
  .preview-features {
    grid-column: 1;
    grid-row: 3;
  }
}
</style> 